<?php if(!defined('HDPHP_PATH'))exit;C('SHOW_NOTICE',FALSE);?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>添加商品</title>
    <style type="text/css">
		.checkbox{
			 margin-left:5px;
			 width:90px;
			 margin-top: 10px;
		}
		textarea{
			width: 300px;
			height: 100px;
		}
    </style>
    <link rel="stylesheet" type="text/css" href="http://127.0.0.1/juanpi/Static/Admin/hdjs/hdjs.css"/>
    <script src="http://127.0.0.1/juanpi/Static/Admin/js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
    <!--百度编辑器-->
    <script type="text/javascript" charset="utf-8" src="http://127.0.0.1/juanpi/Static/Admin/ueditor1_4_3/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="http://127.0.0.1/juanpi/Static/Admin/ueditor1_4_3/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="http://127.0.0.1/juanpi/Static/Admin/ueditor1_4_3/lang/zh-cn/zh-cn.js"></script>
	<!--上传插件-->
	<script type="text/javascript" charset="utf-8" src="http://127.0.0.1/juanpi/Static/Admin/uploadify/jquery.uploadify.min.js" ></script>
	<link href="http://127.0.0.1/juanpi/Static/Admin/uploadify/uploadify.css" type="text/css" rel="stylesheet">
	
</head>
<body>
<div class="wrap">
    <div class="hd-title-header">添加商品</div>
    <form action="" method="post" class="form-inline hd-form" enctype="multipart/form-data" id="shopForm">
    	<script type="text/javascript">
    		$(function(){
    			//异步获取商品属性和规格
    			$('select[name=category_cid]').change(function(){
    				//获得选择分类的cid
    				var category_cid = $(this).val();
    				$.ajax({
    					type:"post",
						url:"<?php echo U('getTypeAttr');?>",
						data:{cid : category_cid},
						dataType:'json',
						success:function(phpData){
							//定义规格和属性字符串
							var attr = '';
							var spec = '';
							//循环json组合字符串	
							$.each(phpData, function(k,v) {
								
								//如果是属性的时候
								if(v.at_type == 0){
							  		 attr += '<tr style="color:red">' + 
				            			'<th class="w100">'+v.atname+'</th>' + 
				            			'<th>' + 
					            			'<select name="attr['+v.atid+']">' + 
					            				'<option value="">------请选择------</option>';
					            				var option = '';
					            				$.each(v.at_value, function(kk,vv) {    
					            					 option += '<option value="'+vv+'">'+vv+'</option>';                                                       
					            				});
					            			attr += option;
					            			attr += '</select>' + 
				            			'</th>' + 
				            			'<th></th>' + 
				            		'</tr>';  
    							}else{
    								//如果是规格的时候
								  	spec += '<tr style="color: blue;">' + 
					            		'<th class="w100">'+v.atname+'</th>' + 
					            		'<th width="50">' + 
					            			'<select name="spec['+v.atid+'][value][]">' + 
					            				'<option value="">------请选择------</option>';
					            				var option = '';
					            				$.each(v.at_value, function(kk,vv) {    
					            					 option += '<option value="'+vv+'">'+vv+'</option>';                                                       
					            				});
					            				//连接option
					            				spec += option;
						            			spec += '</select>' + 
									            		'</th>' + 
									            		'<th>附加价格 ' +
									            			'<input type="text" name="spec['+v.atid+'][price][]" id="" value=""/>' + 
									            			' <a href="javascript:;" class="hd-btn hd-btn-primary add-spec">添加规格</a>' + 
									            		'</th>' + 
									            '</tr>';
    							}
    							
							});
							//插入到属性的表格中
							$('#attr').html(attr);
							$('#spec').html(spec);
						}
    				});
    			})
    			
    			//点击添加规格，规格会多一个
    			$('.add-spec').live('click',function(){
    				var tr = $(this).parents('tr');
    				//克隆一个父级tr
    				var cloneTr = tr.clone();
    				cloneTr.find('a').html('删除规格').removeClass('hd-btn-primary').removeClass('add-spec').addClass('hd-btn-danger remove-spec');
    				//插入到当前tr的下一行
    				tr.after(cloneTr);
    			})
    			//点击删除规格
				$('.remove-spec').live('click',function(){
					$(this).parents('tr').remove();
				})
				
				//表单提交，把规格和属性放到隐藏域
				$('#shopForm').submit(function(){
					//抓到规格和属性的内容
					var attr = $('#attr').html();
					var spec = $('#spec').html();
					//存到隐藏域，为了提交给php
					var hidden = "<input type='hidden' name='selected[attr]' value='"+attr+"'/>";
					hidden += "<input type='hidden' name='selected[spec]' value='"+spec+"'/>";
					$(this).append(hidden);
				})
    			
    			//让选中规格和属性都有selected属性
    			$('select').live('change',function(){
    				$(this).find('option:selected').attr('selected',true).siblings().removeAttr('selected');
    			})
    			//让添加价格存入缓存
    			$('input').live('blur',function(){
    				$(this).attr('value',$(this).val());
    			})
    			
    			//点击x 删除列表图片
	    		$('.close').live('click',function(){
	    			//父级li
	    			var li = $(this).parents('li');
	    			//获得完整路径
	    			var path = $(this).parents('li').find('input[type=hidden]').val();
	    			$.ajax({
	    				type:"post",
	    				url:"<?php echo U('delImg');?>",
	    				data:{path : path},
	    				success:function(){
	    					li.remove();
	    				}
	    			});
	    		})
    			
    		});
    	</script>
        <table class="hd-table hd-table-list">
        	<tr>
                <th class="w100"><a href="javascript:;" class="hd-btn hd-btn-success hd-btn-sm">基本信息</a></th>
                <td class="w100"></td>
                <td></td>
            </tr>
            <tr>
                <th class="w100">所属分类</th>
                <td class="w100">
                    <select name="category_cid" class="w200">
                    	<option value="">-------请选择分类-------</option>
                    	<?php foreach ($cateData as $k=>$v){?>
                    		<option value="<?php echo $v['cid'];?>"><?php echo $v['_name'];?></option>
                    	<?php }?>
                    </select>
                </td>
                <td>不能选择顶级分类</td>
            </tr>
            <tr>
                <th class="w100">所属品牌</th>
                <td>
                    <select name="brand_bid" class="w200">
                    	<option value="">-------请选择品牌-------</option>
                    	<?php foreach ($brandData as $k=>$v){?>
                    		<option value="<?php echo $v['bid'];?>"><?php echo $v['bname'];?></option>
                    	<?php }?>
                    </select>
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="w100">商品名称</th>
                <td>
                    <input type="text" name="gname" id="" />
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="w100">单位</th>
                <td>
                    <input type="text" name="unit" id="" value="件"/>
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="w100">市场价</th>
                <td>
                    <input type="text" name="marketprice" id="" />
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="w100">商城价</th>
                <td>
                    <input type="text" name="shopprice" id="" />
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="w100">点击次数</th>
                <td>
                    <input type="text" name="click" id="" />
                </td>
                <td></td>
            </tr>
        </table>
        
        <table class="hd-table hd-table-list">
            <tr>
                <th class="w100"><a href="javascript:;" class="hd-btn hd-btn-success hd-btn-sm">商品属性</a></th>
                <td class="w100">
                </td>
                <td></td>
            </tr>
        </table>
        <!--商品属性的字符串要插入到这个表格中-->  
        <table id="attr" class="hd-table hd-table-list">
           
        </table>
        
        
        <table class="hd-table hd-table-list">
            <tr>
                <th class="w100"><a href="javascript:;" class="hd-btn hd-btn-success hd-btn-sm">商品规格</a></th>
                <td class="w100">
                </td>
                <td></td>
            </tr>
        </table>
        <!--把循环好的规格放到这个表格中-->
        <table id="spec" class="hd-table hd-table-list">
            
        </table>
        
        
        <table class="hd-table hd-table-list">
            <tr>
                <th class="w100"><a href="javascript:;" class="hd-btn hd-btn-success hd-btn-sm">列表图</a></th>
                <td class="w100"></td>
                <td></td>
            </tr>
            <tr>
                <th class="w100">上传图片</th>
                <td>
					<div lab="uploadFile">
            			<input id="listpic" type="file" multiple="true">
            			<span>类型: *.jpg,*.png 大小: 2000KB 数量: 1</span>
            			<script type="text/javascript">
                		$(function(){
                    		$('#listpic').uploadify({
	                        	'formData': {//POST数据
	                            	'<?php echo session_name();?>' : '<?php echo session_id();?>',
	                        	},
		                        'fileTypeDesc' : '上传文件',//上传描述
		                        'fileTypeExts' : '*.jpg;*.png',
		                        'swf'      : 'http://127.0.0.1/juanpi/Static/Admin/uploadify/uploadify.swf',
		                        'uploader' : '<?php echo U("uploadList");?>',//上传操作方法
		                        'buttonText':'选择文件',
		                        'fileSizeLimit' : '2000KB',
		                        'uploadLimit' : 100,//上传文件数
		                        'width':65,
		                        'height':25,
		                        'successTimeout':10,//等待服务器响应时间
		                        'removeTimeout' : 0.2,//成功显示时间
		                        'onUploadSuccess' : function(file, data, response) {
		                            data=$.parseJSON(data);
		                            var imageUrl = data.image?data.url:'http://127.0.0.1/juanpi/Static/Admin/image/default.png';
		                            var li="<li path='"+data.path+"' url='"+data.url+"'><img src='"+imageUrl+"' class='hd-w80 hd-h70'/><a href='javascript:;' style='color: red;' class='del-img close' >X</a><input type='hidden' name='img' value='"+data.path+"'/></li>";
		                            $("#uploadList ul").prepend(li);
                        		}
                    		});
                		});
            			</script>
			            <div id="uploadList">
			                <ul>
			 
			                </ul>
			            </div>
	        		</div>
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="w100"><a href="javascript:;" class="hd-btn hd-btn-success hd-btn-sm">商品图册</a></th>
                <td class="w100"></td>
                <td></td>
            </tr>
            <tr>
                <th class="w100">上传图片</th>
                <td>
					<div lab="uploadFile">
	            			<input id="pic" type="file" multiple="true">
	            			<span>类型: *.jpg,*.png 大小: 2000KB 数量: 10</span>
	            			<script type="text/javascript">
	                		$(function() {
	                    		$('#pic').uploadify({
	                        		'formData': {//POST数据
	                            '<?php echo session_name();?>' : '<?php echo session_id();?>',
	                        },
	                        'fileTypeDesc' : '上传文件',//上传描述
	                        'fileTypeExts' : '*.jpg;*.png',
	                        'swf'      : 'http://127.0.0.1/juanpi/Static/Admin/uploadify/uploadify.swf',
	                        'uploader' : '<?php echo U("uploadPic");?>',//上传操作方法
	                        'buttonText':'选择文件',
	                        'fileSizeLimit' : '2000KB',
	                        'uploadLimit' : 100,//上传文件数
	                        'width':65,
	                        'height':25,
	                        'successTimeout':10,//等待服务器响应时间
	                        'removeTimeout' : 0.2,//成功显示时间
	                        'onUploadSuccess' : function(file, data, response) {
	                            data=$.parseJSON(data);
	                            var imageUrl = data.image?data.url:'http://127.0.0.1/juanpi/Static/Admin/image/default.png';
	                            var li="<li path='"+data.path+"' url='"+data.url+"'><img src='"+imageUrl+"' class='hd-w80 hd-h70'/><a href='javascript:;' style='color: red;' class='del-img close'>X</a><input type='hidden' name='shopPic[]' value='"+data.path+"'/></li>";
	                            $("#picList ul").prepend(li);
	                        }
	                    });
	                });
	            </script>
	            <div id="picList">
	                <ul>
	                	
	                </ul>
	            </div>
	        </div> 
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="w100"><a href="javascript:;" class="hd-btn hd-btn-success hd-btn-sm">商品详细</a></th>
                <td class="w100"></td>
                <td></td>
            </tr>
             <tr>
                <th class="w100">商品详细</th>
                <td>
                    <script id="ed_intro" type="text/plain" style="width:600px;height:500px;" name="intro"></script>
                    <script>
	        				var ue = UE.getEditor('ed_intro');
	   				</script>
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="w100"><a href="javascript:;" class="hd-btn hd-btn-success hd-btn-sm">售后服务</a></th>
                <td class="w100"></td>
                <td></td>
            </tr>
             <tr>
                <th class="w100">售后服务</th>
                <td>
                    <script id="ed_serv" type="text/plain" style="width:600px;height:500px;" name="service"></script>
                    <script>
	        				var ue = UE.getEditor('ed_serv');
	   				</script>
                </td>
                <td></td>
            </tr>
        
        </table>
        <div class="position-bottom">
            <input type="submit" class="hd-btn hd-btn-success hd-btn-sm" value="添加"/>
        </div>
    </form>
</div>
</body>
</html>